// 三点动画
.balls {
  width: 60px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 25px auto;

  view {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fc2f70;
    transform: translateY(-100%);
    animation: wave 0.4s ease-in-out alternate infinite;
  }

  view:nth-of-type(1) {
    animation-delay: -0.4s;
  }
  view:nth-of-type(2) {
    animation-delay: -0.2s;
  }
}

@keyframes wave {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

// 三环动画
.loader {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #f5f5f5;
}

.outer,
.middle,
.inner {
  border: 3px solid transparent;
  border-top-color: #00a679;
  border-right-color: #00a679;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.outer {
  width: 3.5em;
  height: 3.5em;
  margin-left: -1.75em;
  margin-top: -1.75em;
  animation: spin 2s linear infinite;
}

.middle {
  width: 2.1em;
  height: 2.1em;
  margin-left: -1.05em;
  margin-top: -1.05em;
  animation: spin 1.75s linear reverse infinite;
}

.inner {
  width: 0.8em;
  height: 0.8em;
  margin-left: -0.4em;
  margin-top: -0.4em;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 波浪动画
.wave {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 2em;
  
  view {
    width: 4px;
    height: 10px;
  }
  
  view:nth-of-type(1) {
    background-color: rgba($color: #efbfd5, $alpha: .8);
    animation: grow 1s -0.5s ease-in-out infinite;
  }
  
  view:nth-of-type(2) {
    background-color: rgba($color: #efbfd5, $alpha: .5);
    animation: grow 1s -0.4s ease-in-out infinite;
  }

  view:nth-of-type(3) {
    background-color: rgba($color: #efbfd5, $alpha: .2);
    animation: grow 1s -0.3s ease-in-out infinite;
  }
  
  view:nth-of-type(4) {
    background-color: rgba($color: #9d61fd, $alpha: .5);
    animation: grow 1s -0.15s ease-in-out infinite;
  }
  
  view:nth-of-type(5) {
    background-color: rgba($color: #9d61fd, $alpha: .8);
    animation: grow 1s ease-in-out infinite;
  }
}

@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
}
